%abs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

%img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

%clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

%empty {
  content: '暂无数据';
  display: block;
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  color: #bbb;
  font-size: 20px;
  text-shadow: 0 0 5px #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 3px;
  text-align: center;
}

@mixin float($dic: left) {
  float: $dic;
}

// 页面拼图框架
@mixin layout($gutter:6px) {
  height: 100%;

  &>table {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    table-layout: fixed;

    &>tr>td {
      height: 50%;
      padding: $gutter;
    }
  }

}

$appendFFF:5px;

%append {
  content: '';
  position: absolute;
  height: 30px;
  pointer-events: none;
  background-image: linear-gradient(#fff $appendFFF, transparent);
  display: block;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

%appstart {
  @extend %append;
  background-image: linear-gradient(0deg, #fff $appendFFF, transparent);
  bottom: 0;
  top: unset;
}